<template>
  <view class="section">
    <view class="section-in"
          :style="{'color': titleColor, 'border-left-color': lineColor}">
      <text class="section-title">{{title}}</text>
    </view>
  </view>
</template>

<script>
  export default {
    name: "section-title",
    props: {
      title: {
        type: String,
        default: ''
      },
      titleColor: {
        type: String,
        default: '#333'
      },
      lineColor: {
        type: String,
        default: '#999'
      }
    }
  }
</script>

<style scoped>
  .section {
    background: #fff;
    padding: 32rpx;
		/* #ifndef APP-NVUE */
    display: flex;
		/* #endif */
    flex-direction: row;
    align-items: center;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #f5f5f5;
  }
  .section .section-in {
    border-left-width: 6rpx;
    border-left-style: solid;
    padding-left: 16rpx;
  }
  .section .section-in .section-title {
    font-size: 32rpx;
    font-weight: bold;
  }
</style>
